<template>
  <el-container>
    <el-main>
      <div class="enter-container">
        <CommonBlog v-if="Object.keys(blog).length" :form="blog" :is-like-click="isLike" :is-hidden="false" />
        <my-comment  />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import MyComment from '@/components/MyComment'
import CommonBlog from '@/views/Blog/CommonBlog'
import { detailBlog } from '@/networks/blog'

export default {
  name: 'DetailBlog',
  components: { CommonBlog, MyComment },
  data() {
    return {
      blog: {},
      isLike: false,
      id: -1
    }
  },
  activated() {
    if (this.id !== this.$route.query.id) {
      this.init()
    }
  },
  methods: {
    init() {
      this.id = this.$route.query.id
      this.blog = {}
      detailBlog(this.id)
        .then(res => {
          const data = res.data.data
          this.blog = data.blog
          this.isLike = data.isLike === 1
        })
    }
  }
}
</script>

<style scoped>
  .enter-container {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1200px;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    position: relative;
    z-index: 100 !important;
    padding: 10px;
  }

</style>
